<template>
  <div class="home">
    <div id="box">
      SHEZHI
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
  data () {
    return {
      option: {
        backgroundColor: '#000',
        globe: {
          baseTexture: '../../assets/b.jpg',
          heightTexture: '../../assets/a.jpg',
          displacementScale: 0.04,
          shading: 'realistic',
          environment: '../../assets/starfield.jpg',
          realisticMaterial: {
            roughness: 0.9
          },
          postEffect: {
            enable: true
          },
          light: {
            main: {
              intensity: 5,
              shadow: true
            },
            ambientCubemap: {

              diffuseIntensity: 0.2
            }
          }
        }
      }
    }
  },
  mounted () {
    this.initcharts()
  },
  methods: {
    initcharts () {
      var myChart = echarts.init(document.getElementById('box'))
      myChart.setOption(this.option)
    }
  }
}
</script>
<style scoped>
#box {
  height: 100vh;
  /* background-image: url('../../assets/starfield.jpg'); */
}
</style>
